<template>
	<view class="">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-30" style="height: 100rpx;">
			<image src="/static/image/9.png" style="width:86rpx;height:50rpx" class="" @click="pageback()"></image>
			<view class="flex aic">
			</view>
		</view>
		<view class="he3 w100pc"></view>
			<view class="weight f30 lrmg-40 fsb">
				<view class="gray272">矩陣</view>
				<view class="" style="color: #31B898;" @click="pageto('/pages/wode/juzhen_jilu')">記錄</view>
			</view>
			<view class="he4 w100pc"></view>
			<view class="bra20 lrmg-40 fff fcc rel" style="background: #31B898;padding: 40rpx;height: 300rpx;">
				<view class=" flex jc-center al-end" @tap="pageto('/pages/wode/jiangli')">
					<text class="weight" style="color: rgba(51, 51, 51, 0.50);">奖励點：</text>
					<text class="weight mg-r-20 gray333" style="font-size: 60rpx;">{{Number(coin.reward)}}</text>
					<u-icon name="arrow-right" size="28" color="#333"></u-icon>
				</view>
				<view class="" style="position: absolute;right: 50rpx;bottom: 30rpx;">
					<text class="weight" style="color: rgba(51, 51, 51, 0.50);">已釋放數量：</text>
					<text class="weight mg-r-20 gray333" style="font-size: 50rpx;">{{Number(userInfo.release_matrix)}}</text></view>
			</view>
			<view class="he4 w100pc"></view>
			<view class="middle lrmg-40">
				<view class="fsb">
					<view class="tag bg1" v-if="Number(coin.reward) > 0">參與中</view>
					<view class="tag bg2" v-else>已出局</view>
					<view class="f24">
					</view>
				</view>
				<view class="" v-if="juzhen != ''">
					<!-- 第一层 -->
					<view class="w100pc fcc">
						<view class="ppp1" v-if="juzhen[0].id != ''">{{jiequ(juzhen[0].username)}}</view>
						<view class="ppp1s" v-else></view>
					</view>
					<view class="w100pc" style="height: 100rpx;"></view>
					<!-- 第二层 -->
					<view class="flex">
						<view class="xian flex jc-end">
							<view class="www1" style="">
								<view class="ppp2" v-if="juzhen[1].id != ''" @tap="tz(juzhen[1].id)">{{jiequ(juzhen[1].username)}}</view>
								<view class="ppp2s" v-else></view>
								<view class="one"></view>
							</view>
						</view>
						<view class="xian flex jc-center">
							<view class="www1" style="">
								<view class="ppp2" v-if="juzhen[2].id != ''" @tap="tz(juzhen[2].id)">{{jiequ(juzhen[2].username)}}</view>
								<view class="ppp2s" v-else></view>
								<view class="two"></view>
							</view>
						</view>
						<view class="xian flex jc-start">
							<view class="www1" style="">
								<view class="ppp2" v-if="juzhen[3].id != ''" @tap="tz(juzhen[3].id)">{{jiequ(juzhen[3].username)}}</view>
								<view class="ppp2s" v-else></view>
								<view class="three"></view>
							</view>
						</view>
					</view>
					<view class="w100pc" style="height: 100rpx;"></view>
					<!-- 第三层 -->
					<view class="flex">
						<view class="xian flex jc-end">
							<view class="mg-r-10 rel www2">
								<view class="ppp3" v-if="juzhen[4].id != ''" @tap="tz(juzhen[4].id)">{{jiequ(juzhen[4].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="one_left"></view>
							</view>
							<view class="mg-r-10 rel www2">
								<view class="ppp3" v-if="juzhen[5].id != ''" @tap="tz(juzhen[5].id)">{{jiequ(juzhen[5].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="one_center"></view>
							</view>
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[6].id != ''" @tap="tz(juzhen[6].id)">{{jiequ(juzhen[6].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="one_right"></view>
							</view>
						</view>
						<view class="xian flex jc-center">
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[7].id != ''" @tap="tz(juzhen[7].id)">{{jiequ(juzhen[7].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="two_left"></view>
							</view>
							<view class="lrmg-10 rel www2">
								<view class="ppp3" v-if="juzhen[8].id != ''" @tap="tz(juzhen[8].id)">{{jiequ(juzhen[8].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="two_center"></view>
							</view>
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[9].id != ''" @tap="tz(juzhen[9].id)">{{jiequ(juzhen[9].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="two_right"></view>
							</view>
						</view>
						<view class="xian flex jc-start">
							<view class="rel www2">
								<view class="ppp3" v-if="juzhen[10].id != ''" @tap="tz(juzhen[10].id)">{{jiequ(juzhen[10].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="three_left"></view>
							</view>
							<view class="mg-l-10 rel www2">
								<view class="ppp3" v-if="juzhen[11].id != ''" @tap="tz(juzhen[11].id)">{{jiequ(juzhen[11].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="three_center"></view>
							</view>
							<view class="mg-l-10 rel www2">
								<view class="ppp3" v-if="juzhen[12].id != ''" @tap="tz(juzhen[12].id)">{{jiequ(juzhen[12].username)}}</view>
								<view class="ppp3s" v-else></view>
								<view class="three_right"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mg-t-150 fsb">
				<u-button type="primary" :ripple="true" :custom-style="customStyle" @click="dakai(1)">参与矩阵</u-button>
			</view>
		<view class="he3 w100pc"></view>
		<!-- 参与 -->
		<u-popup v-model="showcanyu" mode="center" :mask-close-able="true" :border-radius="20" :closeable="true">
			<view style="background: #1B1B1B;width: 600rpx;padding: 50rpx;">
				<view class="f40 gray272 weight">參與</view>
				<view class="mg-t-40 f26 weight">按金額參與</view>
				<view class="mg-t-40 pd-b-20 fsb" style="border-bottom: 1rpx solid rgba(255, 255, 255, .2);">
					<input type="number" v-model="money" :disabled="true" :placeholder="'最低參與數量為' + canshu.minimum_quantity" style="" class="f36" />
					<view class="f30" style=""></view>
				</view>
				<view class="f24 grayc4 mg-t-20" style="text-align: right;">余额：{{userInfo.usdt}} USDT</view>
				<view class="f24 grayc4 mg-t-20" style="text-align: right;">TP錢包余额：{{balance}} USDT</view>
				<view class="fsb mg-t-40 mg-b-40">
					<view class="" style="color: #fff;">參與支付</view>
					<view class="flex aic" style="color: #fff;">
						<view class="mg-r-10 yuan"></view>
						<view class="mg-r-10">USDT</view>
					</view>
				</view>
				<view class="mg-t-40 fsb">
					<view class="" style="color: #fff;">捐贈份數</view>
					<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
				</view>
				<view class="fsb mg-t-40 mg-b-40" @click="show1 = true">
					<view class="" style="color: #fff;">支付方式</view>
					<view class="flex aic" style="color: #fff;">
						<view class="mg-r-10">{{juzhen_type == 0 ? '余额支付' : '錢包支付'}}</view>
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<u-button type="primary" :ripple="true" :custom-style="customStyless" @tap="goumai">參與</u-button>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="show1"  :default-selector="[0]" :range="selector1" @confirm="xuanze1"></u-picker>
	</view>
</template>

<script>
	var	that
	import {
		_updataTabBar,
		pageto,
		pageback
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import Web3 from "web3";
	import abi from "../../common/abi/ERC20.js";
	export default{
		data(){
			return{
				show1: false,
				selector1: ['余额支付','錢包支付'],
				showcanyu:false,
				showfutou:false,
				customStyle: {
					color: '#FFFFFF',
					background:'#31B898',
					width:'670rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					height:'100rpx'
				},
				customStyle1: {
					color: '#000',
					background:'#b9b9b9',
					width:'250rpx',
					fontWeight:'bold',
					fontSize:'30rpx'
				},
				customStyles: {
					color: '#fff',
					background:'linear-gradient(0deg, #1C416D 0%, #35659F 100%)',
					width:'250rpx',
					fontWeight:'bold',
					fontSize:'30rpx'
				},
				customStyless: {
					color: '#000',
					background:'#31B898',
					width:'100%',
					height:'80rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx',
					margin:'0'
				},
				juzhen:[],
				coin:{},
				userInfo:{},
				money:'',
				juzhen_type:0,
				walletAddress: null,
				qianbao:null,
				canshu:{},
				value: 1,
				balance:0
			}
		},
		onLoad() {
			that = this
			this.walletAddress = that.getLoginInfo.user
			console.log(window.tronWeb);
		},
		onShow(){
			that.gets()
			that.getQian()
			that.getUser()
			that.getCanshu()
			that.getTokenBalance()
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getTextArr',
				'getLoginInfo'
			])
		},
		methods:{
			//查询代币余额
			async getTokenBalance(){
				let ethereum = window.ethereum
				const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
				const account = accounts[0];
				var web3 = web3 = new Web3(ethereum);;
				let fromAddress = account;//查询用户地址
				let ethContract = new web3.eth.Contract(abi,that.qianbao.usdt_contract.content) //所有代币的abi可以通用（abi,合约地址）
				let balance = await ethContract.methods.balanceOf(fromAddress).call()
				that.balance = balance/Math.pow(10,18)
				console.log(that.balance,'balance');
			  },
			valChange(e) {
				console.log('当前值为: ' + e.value)
				that.money = Number(that.canshu.minimum_quantity) * Number(e.value)
			},
			succ(){
				that.value = 1
				that.money = ''
				that.gets()
				that.getUser()
				that.getTokenBalance()
				that.showfutou = false
				that.showcanyu = false
				uni.showToast({
					title: '已提交',
					icon: 'none'
				});
			},
			chuli(order,e){
				let postData = {
					currency:that.juzhen_type,
					txhash:order,
					type:'pay_matrix',
					id:e
				}
				that.$postAjax('/api/Finance/paid',postData,function(res){
					that.succ()
				})
			},
			//直接转账充币地址USDT
			  async getTokenTransfer(e){
				if(window.web3) {
					let ethereum = window.ethereum
				  let web3 = new Web3(ethereum);
				  console.log(Web3);
				   let ethContract = new web3.eth.Contract(abi,that.qianbao.usdt_contract.content) //所有代币的abi可以通用（abi,合约地址）
				   console.log(ethContract);
				  //转账数量
				  let amount = Number(that.money)*Math.pow(10,18);//
				  //账户
				  const fromAddress = await ethereum.request({ method: 'eth_requestAccounts' });
				  //接收地址
				  let toAddress = '0x8A4Ec1B668782ED1997Bb84432A4858039e23965';
				  uni.showLoading({
				  	mask: true
				  });
				  setTimeout(function() {
				  					  uni.hideLoading()
				  }, 10000);
				  const resp = await ethContract.methods.transfer(toAddress,amount+'').send({ from: fromAddress[0] })
				  uni.hideLoading()
				  console.log(resp);
				  that.chuli(resp.transactionHash,e)
			  }
					   
			},
			getQian(){
				that.$postAjax('api/index/address','',function(res){
					console.log(res,'qianbao');
					that.qianbao = res.data
				})
			},
			xuanze1(e){
				// console.log(e[0]);
				that.juzhen_type = e[0]
			},
			tz(id){
				console.log(id);
				if(id == ''){
					return
				}
				uni.navigateTo({
					url:'/pages/wode/juzhen_detail?id=' + id
				})
			},
			getCanshu(){
				that.$postAjax('api/Matrix/data_config','',function(res){
					that.canshu = res.data
				})
			},
			// 整除
			zhengchu(a,b){
				let aaa
				if (a % b === 0) {
					aaa = true
				}else{
					aaa = false
				}
				return aaa
			},
			goumai(){
				console.log(this.juzhen_type);
				return
				uni.showLoading({
					mask: true
				});
				if(that.juzhen_type == 0){
					if(Number(that.userInfo.usdt) - Number(that.money) < 0){
						uni.showToast({
							title: '余额不足',
							icon: 'none'
						});
						return
					}
				}else{
					if(that.balance - Number(that.money) < 0){
						uni.showToast({
							title: 'TP钱包余额不足',
							icon: 'none'
						});
						return
					}
				}
				if(Number(that.money) < Number(that.canshu.minimum_quantity)){
					uni.showToast({
						title: '參與數量不能低於' + that.canshu.minimum_quantity,
						icon: 'none'
					});
					return
				}
				if(!that.zhengchu(Number(that.money),Number(that.canshu.multiple))){
					uni.showToast({
						title: '參與數量的倍數應為' + that.canshu.multiple + '(倍數)',
						icon: 'none'
					});
					return
				}
				let data = {
					money:that.money,
					type:that.juzhen_type + 1
				}
				that.$postAjax('api/Matrix/pay',data,function(res){
				   uni.hideLoading()
				   if(that.juzhen_type == 1){
					   that.getTokenTransfer(res.data)
				   }else{
					   that.succ()
				   }
				})
			},
			quanbu(){
				that.money = that.userInfo.usdt
			},
			getUser(e){
				uni.showLoading({
					mask: true
				});
				that.$postAjax('api/Member/wallet','',function(res){
					console.log(res);
					uni.hideLoading()
					that.userInfo = res.data
					if(e){
						if(Number(that.coin.reward) == 0){
							if(e == 1){
								that.showcanyu = true
								that.money = Number(that.canshu.minimum_quantity)
							}
						}else{
							if(e == 2){
								that.showfutou = true
								that.money = ''
							}
						}
					}
				})
			},
			//截取后三位
			jiequ(e){
				var disName = e;
				var dateLength = disName.length;
				var key = disName.substring(dateLength-3,dateLength);
				return key
			},
			// 参与和复投按钮判断
			dakai(e){
				that.getUser(e)
			},
			// 获取首页数据
			gets(){
				that.$postAjax('api/Index/index','',function(res){
					console.log(res);
					that.juzhen = res.data.juzhen
					that.coin = res.data.coin
				})
			},
			dianji(index) {
				this.current = index;
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
			pageback(){
				pageback()
			}
		}
	}
</script>

<style lang="scss">
	.yuan{
		width: 18rpx;
		height: 18rpx;
		background: linear-gradient(0deg, #FFCA7F 0%, #FFA54A 100%);
		border-radius: 50%;
	}
	.aaa{border-radius: 40rpx 0 0 40rpx;}
	.bbb{border-radius: 0 40rpx 40rpx 0;}
	.bll{background: #1C416D;width: 50%;height: 100rpx;text-align: center;line-height: 100rpx;color: #fff;}
	.gll{background: #D4D4D4;width: 50%;height: 100rpx;text-align: center;line-height: 100rpx;color: #8A8A8A;}
	.middle{
		.ppp1{
			width: 100rpx;
			height: 100rpx;
			background: #31B898;
			color: #fff;
			font-size: 26rpx;
			font-weight: bold;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50%;
		}
		.ppp1s{
			width: 100rpx;
			height: 100rpx;
			background: #31B898;
			border-radius: 50%;
		}
		.ppp2{
			width: 70rpx;
			height: 70rpx;
			background: #31B898;
			color: #fff;
			font-size: 18rpx;
			font-weight: bold;
			line-height: 70rpx;
			text-align: center;
			border-radius: 50%;
		}
		.ppp2s{
			width: 70rpx;
			height: 70rpx;
			background: #31B898;
			border-radius: 50%;
		}
		.ppp3{
			width: 60rpx;
			height: 60rpx;
			background: #31B898;
			color: #fff;
			font-size: 14rpx;
			font-weight: bold;
			line-height: 60rpx;
			text-align: center;
			border-radius: 50%;
		}
		.ppp3s{
			width: 60rpx;
			height: 60rpx;
			background: #31B898;
			border-radius: 50%;
		}
		.tag{
			color: #fff;
			width: 172rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			border-radius: 20rpx;
			font-size: 26rpx;
		}
		.www1{
			width: 70rpx;height: 70rpx;
			position: relative;
		}
		.www2{
			width: 60rpx;height: 60rpx;
		}
		.bg1{
			background: #FFC84D;
		}
		.bg2{
			background: #EB6075;
		}
		.xian{
			width: 33.33%;
		}
		.one{
			position: absolute;
			width: 1rpx;
			height: 120rpx;
			right: -20rpx;
			top: -120rpx;
			background: #31B898;
			transform: rotate(40deg);
		}
		.two{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 34rpx;
			top: -90rpx;
			background: #31B898;
			// transform: rotate(40deg);
		}
		.three{
			position: absolute;
			width: 1rpx;
			height: 120rpx;
			left: -20rpx;
			top: -120rpx;
			background: #31B898;
			transform: rotate(140deg);
		}
		.one_left{
			position: absolute;
			width: 1rpx;
			height: 110rpx;
			right: -20rpx;
			top: -110rpx;
			background: #31B898;
			transform: rotate(40deg);
		}
		.one_center{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 0rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(20deg);
		}
		.one_right{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 24rpx;
			top: -90rpx;
			background: #31B898;
		}
		.two_left{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 0rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(20deg);
		}
		.two_center{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 24rpx;
			top: -90rpx;
			background: #31B898;
		}
		.two_right{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			left: 5rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(340deg);
		}
		.three_left{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			right: 24rpx;
			top: -90rpx;
			background: #31B898;
		}
		.three_center{
			position: absolute;
			width: 1rpx;
			height: 80rpx;
			left: 0rpx;
			top: -94rpx;
			background: #31B898;
			transform: rotate(340deg);
		}
		.three_right{
			position: absolute;
			width: 1rpx;
			height: 110rpx;
			left: -20rpx;
			top: -110rpx;
			background: #31B898;
			transform: rotate(140deg);
		}
	}
</style>